<template>
  <section class="store-wrapper">
    <el-form :inline="true" :model="searchInfo" class="store-wrapper_search">
      <el-form-item label="订货单号">
        <el-input v-model="searchInfo.orderId" placeholder="请输入订货单号"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchInfo.status" placeholder="请选择状态">
          <el-option
            v-for="item in status_list"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="在线平台">
        <el-select v-model="searchInfo.status" placeholder="请选择状态">
          <el-option label="京东" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发货仓库">
        <el-select v-model="searchInfo.status" placeholder="请选择状态">
          <el-option label="京东" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供货主体">
        <el-select v-model="searchInfo.status" placeholder="请选择状态">
          <el-option label="京东" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="searchInfo.startTime"
          type="date"
          style="width: 45%"
          placeholder="选择日期">
        </el-date-picker>
        <el-date-picker
          v-model="searchInfo.endTime"
          type="date"
          style="width: 45%"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <br>
    <el-button type="primary" @click="onCreate">新增订货单</el-button>
    <br>
    <br>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="操作" fixed>
        <template slot-scope="scope">
          <el-button type="text" @click="editItem(scope.row.orderId)">编辑</el-button>
          <el-button type="text" @click="deleteItem(scope.row.orderId)">删除</el-button>
          <el-button type="text" @click="cancelItem(scope.row.orderId)">撤回</el-button>
          <el-button type="text" @click="cancelItem(scope.row.orderId)">导出装箱单</el-button>
          <el-button type="text" @click="cancelItem(scope.row.orderId)">确认收货</el-button>
        </template>
      </el-table-column>
      <el-table-column label="订货单号" fixed>
        <template slot-scope="scope">
          <a target="_blank" :href="'/createDirectOrder/' + scope.row.orderId">{{ scope.row.orderId }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="供货主体"></el-table-column>
      <el-table-column prop="date" label="供货仓库"></el-table-column>
      <el-table-column prop="date" label="订货金额(元)"></el-table-column>
      <el-table-column prop="date" label="申请人"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="date" label="创建人"></el-table-column>
      <el-table-column prop="date" label="创建时间"></el-table-column>
      <el-table-column prop="approvalName" label="最近审批人"></el-table-column>
      <el-table-column prop="approvalName" label="最近审批时间"></el-table-column>
    </el-table>
    <br>
    <br>
    <el-pagination
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page_data.current_page"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="page_data.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page_data.total_page">
    </el-pagination>
  </section>
</template>

<script>
  const DEFAULT_DATA = {
    orderId: '',
    storeId: '',
    status: '',
    startTime: '',
    endTime: ''
  }
  export default {
    data () {
      return {
        searchInfo: Object.assign({}, DEFAULT_DATA),
        page_data: {
          current_page: 1,
          page_size: 20,
          total_page: 400
        },
        status_list: [],
        list: [
          { orderId: 'ZJ201904040001', storeName: '颐堤港（直营门店）', approvalName: '乔艺', status: '待提交' },
          { orderId: 'ZJ201904040002', storeName: '颐堤港（直营门店）', approvalName: '乔艺', status: '待审核' },
          { orderId: 'ZJ201904040003', storeName: '颐堤港（直营门店）', approvalName: '乔艺', status: '待出库' },
          { orderId: 'ZJ201904040004', storeName: '颐堤港（直营门店）', approvalName: '乔艺', status: '已出库' },
          { orderId: 'ZJ201904040005', storeName: '颐堤港（直营门店）', approvalName: '乔艺', status: '已完成' },
          { orderId: 'ZJ201904040006', storeName: '颐堤港（直营门店）', approvalName: '乔艺', status: '待提交' }
        ]
      }
    },
    methods: {
      onQuery () {

      },
      onReset () {
        this.searchInfo = Object.assign({}, DEFAULT_DATA)
      },
      onCreate () {
        this.changeRoute()
      },
      // 编辑
      editItem (id) {
        id && this.changeRoute(id)
      },
      deleteItem (val) {
        this.$confirm('确认删除该条数据？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('delete data')
        }).catch(err => {
          console.log('err', err)
        })
      },
      // 撤销
      cancelItem (id) {
        this.$confirm('确认撤回该条数据？', '撤回确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('撤回')
        })
      },
      changeRoute (pa) {
        this.$router.push({
          name: 'createOnlineOrder',
          params: {
            id: pa || 'new'
          }
        })
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .store-wrapper{
    &_search{
      background: white;
      padding: 20px 0 0 20px;
    }
  }
  .mtb15{
    margin: 15px 0;
  }
</style>

